<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Style.css">
    <script src="Script.js" defer></script>
    <title>饭店经营游戏</title>
</head>
<body>

    <!-- 使用main作为游戏主体 -->
    <main style="z-index: 0;">

        <!-- 头部时间与金钱 -->
        <section class="Information">
            <div title="当前游戏时间" class="Time">
                <span id="weekend">W1 </span>
                <span id="day">D1</span>
            </div>
            <div title="打开/关闭 页面下方的成就系统" class="AS_button" id="AS_button">
                <span>成就列表</span>
            </div>
            <div title="您所拥有的资本" class="Money">
                <span id="Money_Text"></span>
            </div>
        </section>

        <!-- 上部厨师 -->
       <section class="Cooking">
            <!-- 一个个厨师 -->
            <div class="chef" id="chef1">
                <div class="Chef">
                    <div class="chef-icon">
                        <img src="./source/chef.png">
                    </div>
                    <div class="deliver-icon">
                        <img class="deliver-img" src="source/food.png" alt="">
                    </div>
                    <a class="free" href="#">X</a>
                </div>
                <div class="chef_Waiting" >
                    <span class="chef_bar" style="width: 0%;">　</span>
                    <p class="dish_content"></p>
                </div>
            </div>
            <div class="chef" id="chef2">
                <div class="Chef">
                    <div class="chef-icon">
                        <img src="./source/chef.png">
                    </div>
                    <div class="deliver-icon">
                        <img class="deliver-img" src="source/food.png" alt="">
                    </div>
                    <a class="free" href="#">X</a>
                </div>
                <div class="chef_Waiting" >
                    <span class="chef_bar" style="width: 0%;">　</span>
                    <p class="dish_content"></p>
                </div>
            </div>
            <div class="chef" id="chef3">
                <div class="Chef">
                    <div class="chef-icon">
                        <img src="./source/chef.png">
                    </div>
                    <div class="deliver-icon">
                        <img class="deliver-img" src="source/food.png" alt="">
                    </div>
                    <a class="free" href="#">X</a>
                </div>
                <div class="chef_Waiting" >
                    <span class="chef_bar" style="width: 0%;">　</span>
                    <p class="dish_content"></p>
                </div>
            </div>
            <div class="chef" id="chef4">
                <div class="Chef">
                    <div class="chef-icon">
                        <img src="./source/chef.png">
                    </div>
                    <div class="deliver-icon">
                        <img class="deliver-img" src="source/food.png" alt="">
                    </div>
                    <a class="free" href="#">X</a>
                </div>
                <div class="chef_Waiting" >
                    <span class="chef_bar" style="width: 0%;">　</span>
                    <p class="dish_content"></p>
                </div>
            </div>
            <div class="chef" id="chef5">
                <div class="Chef">
                    <div class="chef-icon">
                        <img src="./source/chef.png">
                    </div>
                    <div class="deliver-icon">
                        <img class="deliver-img" src="source/food.png" alt="">
                    </div>
                    <a class="free" href="#">X</a>
                </div>
                <div class="chef_Waiting" >
                    <span class="chef_bar" style="width: 0%;">　</span>
                    <p class="dish_content"></p>
                </div>
            </div>
            <div class="chef" id="chef6">
                <div class="Chef">
                    <div class="chef-icon">
                        <img src="./source/chef.png">
                    </div>
                    <div class="deliver-icon">
                        <img class="deliver-img" src="source/food.png" alt="">
                    </div>
                    <a class="free" href="#">X</a>
                </div>
                <div class="chef_Waiting" >
                    <span class="chef_bar" style="width: 0%;">　</span>
                    <p class="dish_content"></p>
                </div>
            </div>
            <div class="add-chef">
                <div class="add-chef-icon">
                    <img src="./source/no-chef.png">
                </div>
            </div>
        </section>
        
        <!-- 下部就餐 -->
        <section class="Canteen">
            <!-- 一个个就餐顾客 -->
            <div class="customer">
                <div class="customer-station">
                    <div class="customer-icon">
                        <img class="customer_img" id="eat1" src="" alt="">
                    </div>
                    <div class="income-icon">
                        <img  class="income_img"src="source/money.png" alt="">
                    </div>
                    <div class="dish_text">
                        <p class="dish_part" id="eat1_dish1">主菜主菜</p>
                        <p class="dish_part" id="eat1_dish2">凉菜凉菜</p>
                        <p class="dish_part" id="eat1_dish3">饮品饮品</p>
                        <p class="dish_part" id="eat1_dish4">主菜主菜</p>
                        <p class="dish_part" id="eat1_dish5">凉菜凉菜</p>
                        <p class="dish_part" id="eat1_dish6">饮品饮品</p>
                        <p class="dish_part" id="eat1_dish7">主菜主菜</p>
                    </div>
                </div>
                
                <div class="customer-station">
                    <div class="customer-icon">
                        <img class="customer_img" id="eat2" src="" alt="">
                    </div> 
                    <div class="income-icon">
                        <img  class="income_img"src="source/money.png" alt="">
                    </div>
                    <div class="dish_text">
                        <p class="dish_part" id="eat2_dish1">主菜主菜</p>
                        <p class="dish_part" id="eat2_dish2">凉菜凉菜</p>
                        <p class="dish_part" id="eat2_dish3">饮品饮品</p>
                        <p class="dish_part" id="eat2_dish4">主菜主菜</p>
                        <p class="dish_part" id="eat2_dish5">凉菜凉菜</p>
                        <p class="dish_part" id="eat2_dish6">饮品饮品</p>
                        <p class="dish_part" id="eat2_dish7">主菜主菜</p>
                    </div>
                </div>
                
                <div class="customer-station">
                    <div class="customer-icon">
                        <img class="customer_img"id="eat3" src="" alt="">
                    </div>
                    <div class="income-icon">
                        <img  class="income_img"src="source/money.png" alt="">
                    </div>
                    <div class="dish_text">
                        <p class="dish_part" id="eat3_dish1">主菜主菜</p>
                        <p class="dish_part" id="eat3_dish2">凉菜凉菜</p>
                        <p class="dish_part" id="eat3_dish3">饮品饮品</p>
                        <p class="dish_part" id="eat3_dish4">主菜主菜</p>
                        <p class="dish_part" id="eat3_dish5">凉菜凉菜</p>
                        <p class="dish_part" id="eat3_dish6">饮品饮品</p>
                        <p class="dish_part" id="eat3_dish7">主菜主菜</p>
                    </div>
                </div>
                
                <div class="customer-station">
                    <div class="customer-icon">
                        <img class="customer_img"id="eat4" src="" alt="">
                    </div> 
                    <div class="income-icon">
                        <img  class="income_img"src="source/money.png" alt="">
                    </div>
                    <div class="dish_text">
                        <p class="dish_part" id="eat4_dish1">主菜主菜</p>
                        <p class="dish_part" id="eat4_dish2">凉菜凉菜</p>
                        <p class="dish_part" id="eat4_dish3">饮品饮品</p>
                        <p class="dish_part" id="eat4_dish4">主菜主菜</p>
                        <p class="dish_part" id="eat4_dish5">凉菜凉菜</p>
                        <p class="dish_part" id="eat4_dish6">饮品饮品</p>
                        <p class="dish_part" id="eat4_dish7">主菜主菜</p>
                    </div>
                </div>
                
            </div>
        </section>
        
        <!-- 尾部顾客等待 -->
        <section class="Waiting">
            <!-- 一个个等待顾客 -->
            <div class="waitngCustomer">
                <!-- 图片+进度条 -->
                <img class="wait_img" id="wait1" src="./source/customer1.png" alt="">
                <div id="loadbar">
                    <span class="bar">0%</span>
                </div>
            </div>
            <div class="waitngCustomer">
                <img class="wait_img" id="wait2" src="./source/customer2.png" alt="">
                <div id="loadbar">
                    <span class="bar">0%</span>
                </div>
            </div>
            <div class="waitngCustomer">
                <img class="wait_img" id="wait3" src="./source/customer3.png" alt="">
                <div id="loadbar">
                    <span class="bar">0%</span>
                </div>
            </div>
            <div class="waitngCustomer">
                <img class="wait_img" id="wait4" src="./source/customer4.png" alt="">
                <div id="loadbar">
                    <span class="bar">0%</span>
                </div>
            </div>
            <div class="waitngCustomer">
                <img class="wait_img" id="wait5" src="./source/customer5.png" alt="">
                <div id="loadbar">
                    <span class="bar">0%</span>
                </div>
            </div>
            <div class="waitngCustomer">
                <img class="wait_img" id="wait6" src="./source/customer6.png" alt="">
                <div id="loadbar">
                    <span class="bar">0%</span>
                </div>
            </div>
        </section>
        
        <!-- 下面都是功能弹窗 -->
        <!-- 欢迎窗口-->
        <div class="welcome" id="welcome">
            <div class="message">
                <h1>鸡你不美餐厅开业啦！</h1>
                <p class="p1">
                    鸡你不美餐厅即将开业,请认真经营您的餐厅吧。您可以通过以下几件事来经营你的餐厅。
                </p>
                <p class="p2">
                    <span>1.可以招聘厨师来增加餐厅的工作效率</span>
                </p>
                <p class="p2">
                    <span>2.招呼客人</span>
                </p>
                <p class="p2">
                    <span>3.烹饪美食</span>
                </p>
                <div>
                    <img src="./source/cxk.gif" alt="">
                    <img src="./source/cxk1.gif" alt="">
                </div>
                <div class="start" id="start">
                    <p>来跟鸽鸽一起经营吧</p>
                </div>
            </div>
        </div>

        <!-- 聘用厨师的确认窗口 -->
        <div class="add-chef-confirm">
            <div class="message" style="min-height: 30vh;width: 70vw;border: 10px solid rgba(92, 4, 235, 0.5);">
                <h1>您正在招聘厨师--</h1>
                <p class="p1">
                    1.添加新的厨师会增加你每日厨师的工资开销。
                </p>
                <p class="p1">
                    2.添加厨师会提高做菜的效率。
                </p>
                <!-- 厨师的相关数据 -->
                <p class="p1" id="chefDetail">
                    
                </p>
                <div class="start" style="width: 40%;" id="yes">
                    <p>我已经想好了，确定招聘！</p>
                </div>
                <div class="start" style="width: 40%;" id="no">
                    <p>emm,我再考虑一下,取消招聘。</p>
                </div>
            </div>
        </div>
        <!-- 解雇窗口 -->
        <div class="free-chef-confirm">
            <div class="message" style="min-height: 30vh;width: 70vw;border: 10px solid rgba(92, 4, 235, 0.5);">
                <h1>您正在解雇厨师--</h1>
                <p class="p1" id="chef_information">
                    你确定要解雇工龄2年半的蔡徐坤吗？
                </p>
                <p class="p1" id="free_price">
                    你需要支付雇赔偿金:114514
                </p>
                <!-- 厨师的相关数据 -->
                <p class="p1" id="chefDetail">
                    
                </p>
                <div class="start" style="width: 40%;" id="yes_free">
                    <p>我已经想好了，确定解雇！</p>
                </div>
                <div class="start" style="width: 40%;" id="no_free">
                    <p>emm,我再考虑一下,取消解雇。</p>
                </div>
            </div>
        </div>
        <!-- 点菜窗口 -->
        <div class="order_dish">
            <div class="message" style="min-height: 30vh;width: 70vw;border: 10px solid rgba(237, 230, 230, 0.944);background: url(./source/cxk3\(1\).png);background-size: 101% 101%;">
                <h1>您正在点菜--</h1>
                <br>
                <h2 style="justify-content:left">主菜(至少一样)</h2>
                <div class="p1"><input type="checkbox" id="dish7" name="dinner"><label for="dish7">白米饭—————————————————————————价格￥5</label></div>
                <div class="p1"><input type="checkbox" id="dish1" name="dinner"><label for="dish1">香精煎鱼———————————————————————价格￥35</label></div>
                <div class="p1"><input type="checkbox" id="dish5" name="dinner"><label for="dish5">香翅捞饭———————————————————————价格￥15</label></div>
                <h2>凉菜(可不选)</h2>
                <div class="p1"><input type="checkbox" id="dish2" name="meal"><label for="dish2">油饼———————————————————————————价格￥3</label></div> 
                <div class="p1"><input type="checkbox" id="dish6" name="meal"><label for="dish6">香带烧烤———————————————————————价格￥20</label></div>
                <h2>饮品(可不选)</h2>
                <div class="p1"><input type="checkbox" id="dish3" name="drink"><label for="dish3">莓油酥汁汤—————————————————————价格￥40</label></div>
                <div class="p1"><input type="checkbox" id="dish4" name="drink"><label for="dish4">卤粗鸡爪汁———————————————————————价格￥5</label></div>
                
                <div class="start" style="width: 40%;" id="yes_order">
                    <p>下单啦</p>
                </div>
                <div class="start" style="width: 40%;" id="no_order">
                    <p>取消点菜</p>
                </div>
            </div>
        </div>
        <!-- 餐桌已满请等待窗口 -->
        <div class="table-full" id="table-full">
             <div class="message" style="min-height: 8vh;width: 70vw;border: 10px solid rgba(11, 207, 27, 0.944);"><h1>餐桌已满，请您等待片刻(点击关闭)</h1></div>  
        </div>
        <!-- 提醒需要点菜窗口 -->
        <div class="need-command" id="need-command">
            <div class="message" style="min-height: 8vh;width: 70vw;border: 10px solid rgba(13, 94, 208, 0.944);"><h1>请至少点一个菜品/主菜(点击关闭)</h1></div>  
        </div>
        <!-- 解雇失败窗口 -->
        <div class="fireFail" id="fireFail">
        
        </div>
        <!-- GameOver窗口 -->
        <div class="gameOver" id="gameOver">
            <div class="message" style="min-height: 30vh;width: 70vw;border: 10px solid rgba(92, 4, 235, 0.5);">
                <div class="message" style="min-height: 30vh;width: 70vw;border: 10px solid rgba(92, 4, 235, 0.5);">
                    <div class="message" style="min-height: 30vh;width: 70vw;border: 10px solid rgba(92, 4, 235, 0.5);">
                        <h1>你太菜了.jpg</h1>
                        <div class="start" style="width: 40%;" id="yes_over">
                            <p>我已经想好了，不再成为练习生</p>
                        </div>
                        <div class="start" style="width: 40%;" id="no_over">
                            <p>我要继续苦练两年半</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 成就系统 -->
        <div class="achievement_system" id="achievement_system" style="display: none;">
            <h1 class="ach_h1">成就列表</h1>
            <hr class="ach_hr"/>
            <table class="ach_table">
                <caption class="cap">普通成就</caption>
                <tr class="na">
                    <td style="width: 30vw;">游戏天数</td>
                    <td id="na1">1</td>
                </tr>
                <tr class="na">
                    <td style="width: 30vw;">资本最大值</td>
                    <td id="na2">1000</td>
                </tr>
                <tr class="na">
                    <td style="width: 30vw;">总接待顾客数量</td>
                    <td id="na3">0</td>
                </tr>
                <tr class="na">
                    <td style="width: 30vw;">总煮菜数量</td>
                    <td id="na4">0</td>
                </tr>
                <tr class="na">
                    <td style="width: 30vw;">单日最多接待顾客数量</td>
                    <td id="na5">0</td>
                </tr>
                <tr class="na">
                    <td style="width: 30vw;">单日最多煮菜数量</td>
                    <td id="na6">0</td>
                </tr>
            </table>
            <hr class="ach_hr"/>
            <table class="ach_table">
                <caption class="cap">特殊成就</caption>
                <tr class="sa">
                    <!-- 休息日 -->
                    <!-- 一天之内没有接待任何顾客 -->
                    <td style="width: 30vw;" id="sa1_1">???</td>
                    <td id="sa1_2">???</td>
                </tr>
                <tr class="sa">
                    <!-- 门可罗雀 -->
                    <!-- 一天之内没有顾客上门 -->
                    <td style="width: 30vw;" id="sa2_1">???</td>
                    <td id="sa2_2">???</td>
                </tr>
                <tr class="sa">
                    <!-- 破釜沉舟 -->
                    <!-- 游戏结束时厨师数量为0 -->
                    <td style="width: 30vw;" id="sa3_1">???</td>
                    <td id="sa3_2">???</td>
                </tr>
                <tr class="sa">
                    <!-- 火力全开 -->
                    <!-- 六位厨师同时为出餐奋斗 -->
                    <td style="width: 30vw;" id="sa4_1">???</td>
                    <td id="sa4_2">???</td>
                </tr>
            </table>
            <section class="redirection">
                <div title="开始新的一局" class="AS_button" id="game_restart_div">
                    <span id="game_restart">重新开始</span>
                </div>
                <div title="后会有期" class="AS_button" id="game_over_div">
                    <span id="game_over">结束游戏</span>
                </div>
                <div title="关闭成就系统" class="AS_button" id="close_AS_button_div">
                    <span id="close_AS_button">关闭成就列表</span>
                </div>
            </section>
        </div>
    </main>
</body>
</html>